<template>
  <div class="user-container">
    <!-- 用户信息 -->
    <van-row @click="OverlayShow">
      <van-col span="5">
        <img :src="userInfo.avatarSrc" alt="" />
      </van-col>
      <van-col span="8"
        ><span>{{ userInfo.nickName }}</span></van-col
      >
      <van-col span="11"><van-icon name="arrow" /></van-col>
    </van-row>
    <!-- 宫格 -->
    <van-grid :column-num="3">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <!-- 模态框 -->
    <transition name="van-fade">
      <div class="overlay" v-show="isOverlayShow">
        <!-- 点击空白区域关闭遮罩层 -->
        <div class="closeOverlay" @click="isOverlayShow = false"></div>
        <!-- 表单 -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
// 导入loginAPI接口
import { loginAPI } from '@/api/loginAPI.js'
export default {
  name: 'User',
  data() {
    return {
      // 用户名
      username: '',
      // 密码
      password: '',
      // 控制遮罩层显示隐藏
      isOverlayShow: false,
      // 用户信息
      userInfo: {
        // 昵称
        nickName: '登录账号',
        // 头像路径
        avatarSrc: 'https://img01.yzcdn.cn/vant/cat.jpeg'
      }
    }
  },
  methods: {
    // 点击登录触发该函数
    async onSubmit(value) {
      console.log(value)
      const username = value['用户名']
      const pwd = value['密码']
      // 发送请求
      const { data: res } = await loginAPI(username, pwd)
      console.log(res)
      if (res.errno !== 0) {
        this.$toast.fail('登陆失败')
      }
      // 获取后台响应回来的token
      const token = res.data.token
      // 获取后台响应回来的用户信息
      const userInfo = res.data.userInfo
      // 将token存储到本地存储localstorage中
      window.localStorage.setItem('token', token)
      // 将用户信息存储到本地存储localstorage中
      window.localStorage.setItem('userInfo', JSON.stringify(userInfo))
      // 将获取过来的用户信息存储到data数据源中
      this.userInfo.nickName = userInfo.nickname
      this.userInfo.avatarSrc = userInfo.avatar
      // 点击登录1s后隐藏遮罩层
      setTimeout(() => {
        this.isOverlayShow = false
      }, 300)
    },
    // 当用户点击个人信息面板，如果有登陆就不再弹出登录框
    OverlayShow() {
      // 从本地存储localstorage中获取token，判断用户是否登录
      const token = window.localStorage.getItem('token')
      // 如果用户有登陆，点击个人信息时，就不再弹出登录表单
      if (token) return
      // 如果用户没有登录就弹出登录框
      this.isOverlayShow = true
    }
  },
  created() {
    // data、props、methods刚创建的时候就从localStorage中获取token
    // 并将用户信息从本地存储中获取过来
    const token = window.localStorage.getItem('token')
    // 如果localStorage中含有token
    if (token) {
      // 就从本地存储localStorage中获取用户信息
      const userInfos = JSON.parse(window.localStorage.getItem('userInfo'))
      // 将用户信息存储到data数据源中的userIndo
      this.userInfo.nickName = userInfos.nickname
      this.userInfo.avatarSrc = userInfos.avatar
    }
  }
}
</script>

<style lang="less" scoped>
.van-row {
  height: 200px;
  padding: 0 30px;
  background-color: #1b9cfc;
}

.van-col {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-size: cover;
  }
  span {
    color: #fff;
    font-size: 38px;
  }
  .van-icon {
    position: absolute;
    right: 0;
    font-size: 32px;
    color: #fff;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  // padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.5);
  .van-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    background-color: #fff;
  }
  .closeOverlay {
    width: 100%;
    height: 100%;
  }
}
</style>
